<template>
  <div class="checkout-page">
    <!-- 顶部导航栏 -->
    <Header />
    
    <div class="main-content">
      <div class="container">
        <!-- 页面标题 -->
        <div class="page-header">
          <h1>订单结算</h1>
          <p>确认订单信息并完成支付</p>
        </div>
        
        <div class="checkout-content">
          <!-- 左侧内容 -->
          <div class="checkout-main">
            <!-- 收货地址 -->
            <div class="section">
              <h2>收货地址</h2>
              <div class="address-list">
                <div 
                  v-for="address in addresses" 
                  :key="address.id"
                  class="address-item"
                  :class="{ active: selectedAddress?.id === address.id }"
                  @click="selectAddress(address)"
                >
                  <div class="address-info">
                    <div class="address-header">
                      <span class="name">{{ address.name }}</span>
                      <span class="phone">{{ address.phone }}</span>
                      <span v-if="address.isDefault" class="default-tag">默认</span>
                    </div>
                    <div class="address-detail">
                      {{ address.province }} {{ address.city }} {{ address.district }} {{ address.detail }}
                    </div>
                  </div>
                  <div class="address-actions">
                    <a-button type="link" size="small">{{ $t('common.edit') }}</a-button>
                    <a-button type="link" size="small" danger>{{ $t('common.delete') }}</a-button>
                  </div>
                </div>
                
                <div class="add-address" @click="showAddressModal">
                  <PlusOutlined />
                  <span>添加新地址</span>
                </div>
              </div>
            </div>
            
            <!-- 商品清单 -->
            <div class="section">
              <h2>商品清单</h2>
              <div class="order-items">
                <div 
                  v-for="item in cartItems" 
                  :key="item.id"
                  class="order-item"
                >
                  <div class="item-image">
                    <img :src="item.image" :alt="item.name" />
                  </div>
                  <div class="item-info">
                    <h3 class="item-name">{{ item.name }}</h3>
                    <p class="item-desc">{{ item.description }}</p>
                  </div>
                  <div class="item-price">¥{{ item.price }}</div>
                  <div class="item-quantity">x{{ item.quantity }}</div>
                  <div class="item-subtotal">¥{{ (item.price * item.quantity).toFixed(2) }}</div>
                </div>
              </div>
            </div>
            
            <!-- 支付方式 -->
            <div class="section">
              <h2>支付方式</h2>
              <div class="payment-methods">
                <div 
                  v-for="method in paymentMethods" 
                  :key="method.id"
                  class="payment-method"
                  :class="{ active: selectedPayment?.id === method.id }"
                  @click="selectPayment(method)"
                >
                  <div class="method-icon">
                    <component :is="method.icon" />
                  </div>
                  <div class="method-info">
                    <h3>{{ method.name }}</h3>
                    <p>{{ method.description }}</p>
                  </div>
                  <div class="method-radio">
                    <a-radio :checked="selectedPayment?.id === method.id" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 右侧订单摘要 -->
          <div class="checkout-summary">
            <h2>订单摘要</h2>
            
            <div class="summary-items">
              <div class="summary-item">
                <span>商品总价</span>
                <span>¥{{ cartTotal.toFixed(2) }}</span>
              </div>
              <div class="summary-item">
                <span>{{ $t('cart.shipping') }}</span>
                <span>{{ shippingFee > 0 ? `¥${shippingFee.toFixed(2)}` : '免运费' }}</span>
              </div>
              <div class="summary-item">
                <span>优惠券</span>
                <span>-¥{{ discount.toFixed(2) }}</span>
              </div>
            </div>
            
            <a-divider />
            
            <div class="summary-total">
              <span>应付总额</span>
              <span class="total-price">¥{{ (cartTotal + shippingFee - discount).toFixed(2) }}</span>
            </div>
            
            <div class="checkout-actions">
              <a-button 
                type="primary" 
                size="large" 
                block
                :loading="loading"
                :disabled="!selectedAddress || !selectedPayment"
                @click="submitOrder"
              >
                提交订单
              </a-button>
            </div>
            
            <div class="order-note">
              <p>提交订单即表示您同意我们的服务条款和隐私政策</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部信息 -->
    <Footer />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import {
  PlusOutlined,
  CreditCardOutlined,
  WechatOutlined,
  AlipayOutlined
} from '@ant-design/icons-vue'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'

// 使用Vuex store和Vue Router
const store = useStore()
const router = useRouter()

// 响应式数据
const loading = ref(false)
const selectedAddress = ref(null)
const selectedPayment = ref(null)

// 模拟数据
const addresses = ref([
  {
    id: 1,
    name: '张三',
    phone: '13800138000',
    province: '北京市',
    city: '北京市',
    district: '朝阳区',
    detail: 'xxx街道xxx号',
    isDefault: true
  },
  {
    id: 2,
    name: '李四',
    phone: '13900139000',
    province: '上海市',
    city: '上海市',
    district: '浦东新区',
    detail: 'yyy街道yyy号',
    isDefault: false
  }
])

const paymentMethods = ref([
  {
    id: 1,
    name: '支付宝',
    description: '推荐使用支付宝支付',
    icon: AlipayOutlined
  },
  {
    id: 2,
    name: '微信支付',
    description: '使用微信扫码支付',
    icon: WechatOutlined
  },
  {
    id: 3,
    name: '银行卡',
    description: '支持各大银行储蓄卡和信用卡',
    icon: CreditCardOutlined
  }
])

// 计算属性
const cartItems = computed(() => store.getters['cart/cartItems'])
const cartTotal = computed(() => store.getters['cart/cartTotal'])
const shippingFee = computed(() => cartTotal.value >= 99 ? 0 : 10)
const discount = computed(() => 0) // 优惠券折扣

// 方法
const selectAddress = (address) => {
  selectedAddress.value = address
}

const selectPayment = (method) => {
  selectedPayment.value = method
}

const showAddressModal = () => {
  message.info('添加地址功能开发中...')
}

const submitOrder = async () => {
  if (!selectedAddress.value) {
    message.warning('请选择收货地址')
    return
  }
  
  if (!selectedPayment.value) {
    message.warning('请选择支付方式')
    return
  }
  
  loading.value = true
  
  try {
    // 这里应该调用实际的API创建订单
    // const order = await api.createOrder({
    //   address: selectedAddress.value,
    //   payment: selectedPayment.value,
    //   items: cartItems.value,
    //   total: cartTotal.value + shippingFee.value - discount.value
    // })
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 2000))
    
    message.success('订单提交成功！')
    
    // 清空购物车
    store.dispatch('cart/clearCart')
    
    // 跳转到订单详情页
    router.push('/orders')
  } catch (error) {
    console.error('提交订单失败:', error)
    message.error('提交订单失败，请重试')
  } finally {
    loading.value = false
  }
}

// 初始化默认选择
const initDefaultSelections = () => {
  const defaultAddress = addresses.value.find(addr => addr.isDefault)
  if (defaultAddress) {
    selectedAddress.value = defaultAddress
  }
  
  if (paymentMethods.value.length > 0) {
    selectedPayment.value = paymentMethods.value[0]
  }
}

// 生命周期
initDefaultSelections()
</script>

<style scoped>
.checkout-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.main-content {
  flex: 1;
  padding: 20px 0;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 32px;
  font-weight: bold;
  color: #333;
  margin: 0 0 10px 0;
}

.page-header p {
  color: #666;
  font-size: 16px;
  margin: 0;
}

.checkout-content {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 30px;
  align-items: flex-start;
}

.checkout-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.section h2 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 20px 0;
}

/* 地址样式 */
.address-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.address-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border: 2px solid #f0f0f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.address-item:hover {
  border-color: #1890ff;
}

.address-item.active {
  border-color: #1890ff;
  background-color: #f6ffed;
}

.address-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.name {
  font-weight: 600;
  color: #333;
}

.phone {
  color: #666;
}

.default-tag {
  background: #1890ff;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.address-detail {
  color: #666;
  font-size: 14px;
}

.address-actions {
  display: flex;
  gap: 10px;
}

.add-address {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #666;
}

.add-address:hover {
  border-color: #1890ff;
  color: #1890ff;
}

.add-address .anticon {
  font-size: 24px;
  margin-bottom: 8px;
}

/* 商品清单样式 */
.order-items {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.order-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.order-item:last-child {
  border-bottom: none;
}

.item-image {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.item-info {
  flex: 1;
  min-width: 0;
}

.item-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin: 0 0 5px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-desc {
  font-size: 12px;
  color: #666;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-price,
.item-quantity,
.item-subtotal {
  font-size: 14px;
  color: #333;
  text-align: center;
  min-width: 60px;
}

.item-subtotal {
  font-weight: 600;
  color: #ff4d4f;
}

/* 支付方式样式 */
.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.payment-method {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  border: 2px solid #f0f0f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.payment-method:hover {
  border-color: #1890ff;
}

.payment-method.active {
  border-color: #1890ff;
  background-color: #f6ffed;
}

.method-icon {
  font-size: 24px;
  color: #1890ff;
  flex-shrink: 0;
}

.method-info {
  flex: 1;
}

.method-info h3 {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 5px 0;
}

.method-info p {
  font-size: 12px;
  color: #666;
  margin: 0;
}

.method-radio {
  flex-shrink: 0;
}

/* 订单摘要样式 */
.checkout-summary {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  position: sticky;
  top: 20px;
}

.checkout-summary h2 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 20px 0;
}

.summary-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.total-price {
  color: #ff4d4f;
  font-size: 20px;
}

.checkout-actions {
  margin: 20px 0;
}

.order-note {
  text-align: center;
  font-size: 12px;
  color: #999;
}

.order-note p {
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    padding: 15px 0;
  }
  
  .page-header h1 {
    font-size: 24px;
  }
  
  .checkout-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .checkout-summary {
    position: static;
  }
  
  .address-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .address-actions {
    align-self: flex-end;
  }
  
  .order-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .item-price,
  .item-quantity,
  .item-subtotal {
    min-width: auto;
  }
}
</style> 